<template>
  <el-breadcrumb>
    <el-breadcrumb-item>公众监督数据管理</el-breadcrumb-item>
    <el-breadcrumb-item>公众监督数据列表</el-breadcrumb-item>
  </el-breadcrumb>

  <el-form :inline="true" :model="queryForm" size="large" style="margin-top: 20px" class="demo-form-inline">
    <el-form-item label="省区域">
      <el-select v-model="queryForm.provinceId" @change="changeProvince" style="width: 100px">
        <el-option v-for="province in provinceArr" :key="province.provinceId" :label="province.provinceName" :value="province.provinceId" />
      </el-select>
    </el-form-item>

    <el-form-item label="市区域">
      <el-select v-model="queryForm.cityId" style="width: 100px">
        <el-option v-for="city in cityArr" :key="city.cityId" :label="city.cityName" :value="city.cityId" />
      </el-select>
    </el-form-item>

    <el-form-item label="预估等级">
      <el-select v-model="queryForm.estimatedGrade" style="width: 100px">
        <el-option v-for="aqi in aqiArr" :key="aqi.aqiId" :label="aqi.chineseExplain" :value="aqi.aqiId" />
      </el-select>
    </el-form-item>

    <el-form-item label="反馈日期">
      <el-date-picker
          v-model="queryForm.afDate"
          type="date"
          style="width: 110px"
          placeholder="反馈日期"
          format="YYYY/MM/DD"
          value-format="YYYY-MM-DD"
      />
    </el-form-item>

    <el-form-item label="状态">
      <el-radio-group
          v-model="queryForm.state"
          size="large"
          class="status-radio-group"
          @change="onStateChange"
      >
        <el-radio-button label="0" class="unassigned-status" >未指派</el-radio-button>
        <el-radio-button label="1" class="assigned-status">已指派</el-radio-button>
      </el-radio-group>
    </el-form-item>

    <el-form-item>
      <el-button type="danger" @click="clear">清空</el-button>
      <el-button type="primary" @click="query">查询</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="pageResponseDto.list" style="width: 100%;" :cell-style="{ padding: '6px' }" empty-text="无数据">
    <el-table-column prop="afId" label="编号" width="90" />
    <el-table-column prop="supervisor.realName" label="反馈者姓名" />
    <el-table-column prop="gridProvince.provinceName" label="所在省" />
    <el-table-column prop="gridCity.cityName" label="所在市" />
    <el-table-column prop="estimatedGrade" label="预估污染等级">
      <template #default="scope">
        <p
            :style="{
            color: scope.row.aqi.color,
            fontSize: '14px',
            fontWeight: '800',
            textAlign: 'center',
          }"
        >
          {{ scope.row.aqi.aqiExplain }} ({{ scope.row.aqi.chineseExplain }})
        </p>
      </template>
    </el-table-column>
    <el-table-column prop="afDate" label="反馈日期" />
    <el-table-column prop="afTime" label="反馈时间" />
    <el-table-column label="操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="detailsEvent(scope.row.afId)">
          <el-icon title="查看详情" style="font-size: 18px"><Tickets /></el-icon>
        </el-button>
        <el-button
            link
            type="danger"
            size="small"
            @click="assignEvent(scope.row)"
            v-if="queryForm.state == 0"
        >
          <el-icon title="指派网格员" style="font-size: 18px"><Pointer /></el-icon>
        </el-button>
        <el-button
            link
            type="danger"
            size="small"
            @click="assignEvent(scope.row)"
            v-if="queryForm.state == 1"
        >
          <el-icon title="重新指派" style="font-size: 18px"><Edit /></el-icon>
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <div class="pagination">
    <el-pagination
        background
        large
        layout="prev, pager, next, total"
        :total="pageResponseDto.totalRow"
        :page-size="store.state.maxPageNum"
        style="margin-top: 20px"
        v-model:current-page="pageNum"
    />
  </div>
</template>

<script setup>
import { Tickets, Pointer, Edit } from "@element-plus/icons-vue";
import { reactive, ref, inject, watch } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();
const axios = inject("axios");

const queryForm = reactive({
  provinceId: 0,
  cityId: 0,
  estimatedGrade: 0,
  afDate: "",
  state: "0",
});

const pageNum = ref(1);
watch(pageNum, (newValue) => {
  listAqiFeedbackPage(newValue);
});

const provinceArr = ref([]);
const cityArr = ref([]);
const aqiArr = ref([]);
const pageResponseDto = ref({});

const listAqiFeedbackPage = (pageNum) => {
  const param = {
    provinceId: queryForm.provinceId,
    cityId: queryForm.cityId,
    estimatedGrade: queryForm.estimatedGrade,
    afDate: queryForm.afDate,
    state: queryForm.state,
    pageNum,
    maxPageNum: store.state.maxPageNum,
  };
  axios.post("aqiFeedback/listAqiFeedbackPage", param).then((res) => {
    pageResponseDto.value = res.data;
  });
};

const listGridProvinceAll = () => {
  axios.post("gridProvince/listGridProvinceAll").then((res) => {
    provinceArr.value = res.data;
    listGridCityByProvinceId(provinceArr.value[0].provinceId);
    provinceArr.value.unshift({ provinceId: 0, provinceName: "-- 全部 --" });
  });
};

const listGridCityByProvinceId = (provinceId) => {
  axios.post("gridCity/listGridCityByProvinceId", { provinceId }).then((res) => {
    cityArr.value = res.data;
    cityArr.value.unshift({ cityId: 0, cityName: "-- 全部 --" });
  });
};

const listAqiAll = () => {
  axios.post("aqi/listAqiAll").then((res) => {
    aqiArr.value = res.data;
    aqiArr.value.unshift({ aqiId: 0, chineseExplain: "-- 全部 --" });
  });
};

const init = () => {
  listGridProvinceAll();
  listAqiAll();
  listAqiFeedbackPage(1);
};
init();

const clear = () => {
  queryForm.provinceId = 0;
  queryForm.cityId = 0;
  queryForm.estimatedGrade = 0;
  queryForm.afDate = '';
  queryForm.state = '0';
  listAqiFeedbackPage(1);
};

const query = () => {
  listAqiFeedbackPage(1);
};

const onStateChange = () => {
  listAqiFeedbackPage(1);
};

const changeProvince = () => {
  listGridCityByProvinceId(queryForm.provinceId);
};

const detailsEvent = (afId) => {
  router.push({ path: '/index/feedbackInfo', query: { afId } });
};

const assignEvent = (af) => {
  router.push({ path: '/index/assignFeedback', query: { afId: af.afId, provinceId: af.provinceId, cityId: af.cityId } });
};
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: center;
}

/* 未指派按钮选中时为红色 */
/* 给 radio-group 加个类，方便限定作用域 */
.status-radio-group :deep(.unassigned-status.is-active .el-radio-button__inner) {
  background-color: #f56c6c !important;
  border-color: #f56c6c !important;
  color: #fff !important;
}


</style>
